<template>
  <div class="md-view icho-border neu-pointer px-2" @click="showDrawer">
    <md-editor v-model="text" preview-only />
    <el-drawer v-model="drawer" :title="resourceName" direction="btt" size="100%">
      <md-editor
        :model-value="text"
        editor-class="md-detail-view"
        :toolbars="[]"
        :toolbars-exclude="[]"
      />
    </el-drawer>
  </div>
</template>
<script>
// import MdEditor from 'md-editor-v3'
// import 'md-editor-v3/lib/style.css'
export default {
  name: 'Markdown',
  // components: { MdEditor },
  props: {
    resourceURL: {
      type: String,
      default: ''
    },
    dataId: {
      type: String,
      default: ''
    },
    resourceName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      drawer: false,
      text: ''
    }
  },
  watch: {
    resourceURL () {
      if (this.dataId) {
        let that = this
        this.fileObject.getFileContent(this.dataId).then(res => {
          this.fileObject.getFileContentText(res, (str) => {
            that.text = str
          })
        })
      }
    },
    drawer (val) {
      if (val) {
        setTimeout(() => {
          document.getElementById('md-editor-v3-textarea').readOnly = 'true'
        }, 300)
      }
    }
  },
  mounted () {
    let that = this
    this.fileObject.getFileContent(this.dataId).then(res => {
      that.text = res.data
      // this.fileObject.getFileContentText(res, (str) => {
      //   that.text = str
      // })
    })
  },
  methods: {
    showDrawer () {
      this.drawer = true
    }
  }
}
</script>
<style scoped lang="scss">
.md-view {
  height: 500px;
  overflow-y: scroll;
}
.md-detail-view {
  height: 100%;
  :deep(.md-toolbar-wrapper) {
    display: none;
  }
  :deep(.md-content) {
    height: 100%;
  }
  :deep(#md-editor-v3-textarea) {
    border-right: 1px solid #e6e6e6;
  }
}
</style>
